import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography } from '@material-ui/core';
import TitleText from '../TitleText';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "50px 0 0",
        [theme.breakpoints.up('md')]: {
            padding: "0 30px 50px",
        },
    },
    typography: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "12px",
        fontStyle: "normal",
        fontWeight: 700,
        textTransform: "uppercase",
        color: "#000",
        marginLeft: "10px",
        letterSpacing: "-0.56px"
    },
    typography1: {
        letterSpacing: "0",
        background: "linear-gradient(180deg, #1E1E1E 0%, rgba(30, 30, 30, 0.00) 100%)",
        backgroundClip: "text",
        "-webkit-background-clip": "text",
        "-webkit-text-fill-color": "transparent",
        fontSize: "30px",
        fontWeight: 700,
        marginLeft: "10px",
    },
    typography2: {
        fontSize: "14px",
        lineHeight: "normal",
        letterSpacing: "0",
        fontWeight: 400,
        color:"#A4A4A4",
        textTransform: "none",
    },
    titleText: {
        textAlign: "center",
        fontSize: "24px",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        letterSpacing: "-1.5px"
    },
    Ellipse: {
        borderRadius: "50%",
        border: "2px dashed #999",
        padding: "10px",
    },
    EllipseBasic: {
        width: "100px",
        height: "100px",
        backgroundColor: "#D9D9D9",
        borderRadius: "50%",
    },
    grid: {
        padding: "50px 0"
    },
    gridItem:{
        flexWrap:"nowrap"
    },
    divider: {
        width: "10px",
        height: "80px",
        background: "#A3A3A3",
        marginTop: "1px"
    },
    context:{
        marginLeft:"10px"
    }
}));

const NewArrivals = () => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <div className={classes.titleText}>
                new arrivals
                <Typography component="span" className={classes.typography}>
                    (last upload on top)
                </Typography>
            </div>

            <Grid container justifyContent='center' className={classes.grid}>
                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                        <Grid container justifyContent='center'>
                            <div className={classes.divider}></div>
                        </Grid>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 1</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Nisl vel pretium lectus quam id leo. Gravida cum sociis natoque penatibus et.</Typography>
                    </Grid>
                </Grid>

                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                        <Grid container justifyContent='center'>
                            <div className={classes.divider}></div>
                        </Grid>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 2</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Ornare arcu odio ut sem nulla pharetra diam. Et egestas quis ipsum suspendisse ultrices.</Typography>
                    </Grid>
                </Grid>

                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                        <Grid container justifyContent='center'>
                            <div className={classes.divider}></div>
                        </Grid>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 3</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Dipiscing commodo elit at imperdiet dui accumsan sit amet nulla esta.</Typography>
                    </Grid>
                </Grid>

                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                        <Grid container justifyContent='center'>
                            <div className={classes.divider}></div>
                        </Grid>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 4</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Velit euismod</Typography>
                    </Grid>
                </Grid>

                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                        <Grid container justifyContent='center'>
                            <div className={classes.divider}></div>
                        </Grid>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 5</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Habitasse platea dictumst vestibulum rhoncus est pellentesque elit.</Typography>
                    </Grid>
                </Grid>

                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                        <Grid container justifyContent='center'>
                            <div className={classes.divider}></div>
                        </Grid>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 6</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Ut diam quam nulla porttitor. Pellentesque pulvinar pellentesque habitant.</Typography>
                    </Grid>
                </Grid>

                <Grid item xs={10} container className={classes.gridItem}>
                    <div>
                        <div className={classes.Ellipse}>
                            <div className={classes.EllipseBasic}></div>
                        </div>
                    </div>

                    <Grid item className={classes.context}>
                        <Typography className={clsx(classes.typography1)}>Album 7</Typography>
                        <Typography className={clsx(classes.typography, classes.typography2)}>Volutpat consequat mauris nunc congue. Pellentesque diam volutpat commodo.</Typography>
                    </Grid>
                </Grid>

            </Grid>

        </div>
    )
}


NewArrivals.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default NewArrivals
